<template>
  <div class="container">
    <div class="header">
      <span>公告</span>
      <el-button type="primary" @click="showFabu">发布公告</el-button>
    </div>
    <el-table stripe="true" :data="list" style="width: 100%;text-align:center;">
      <el-table-column prop="arttitle" label="标题" width="180">
      </el-table-column>
      <el-table-column label="内容" min-width="800" show-overflow-tooltip="true">
        <template #default="scope">
          <div v-html="scope.row.contents" style="overflow: hidden;"></div>
        </template>
      </el-table-column>
      <el-table-column prop="uptime" label="时间" width="180"></el-table-column>
      <el-table-column label="操作" width="150" fixed="right">
        <template #default="scope">
          <el-button size="small" @click="onEdit(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="xinwendelete(scope.row._id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-dialog v-model="dialogVisible" title="发布公告" width="820" draggable>
    <div class="listbox">
      <el-input v-model="arttitle" placeholder="标题"></el-input>
    </div>
    <div class="listbox">
      <el-input v-model="contents" :rows="5" type="textarea" placeholder="公告内容" />
    </div>
    <div class="listbox">
      <el-input v-model="uptime" placeholder="标题">
        <template #prepend>公告发布时间：</template>
      </el-input>
    </div>
    <span class="dialog-footer">
      <el-button type="primary" @click="handleSubmit">发布公告</el-button>
      <el-button type="primary" @click="dialogVisible = false">
        取消
      </el-button>
    </span>
  </el-dialog>
  <el-dialog v-model="showJoumalism" title="修改公告" width="820" draggable>
    <div class="listbox">
      <el-input v-model="arttitle" placeholder="标题"></el-input>
    </div>
    <div class="listbox">
      <el-input v-model="contents" :rows="5" type="textarea" placeholder="公告内容" />
    </div>
    <div class="listbox">
      <el-input v-model="uptime" placeholder="标题">
        <template #prepend>公告修改时间：</template>
      </el-input>
    </div>
    <span class="dialog-footer">
      <el-button type="primary" @click="getxiugai">修改公告</el-button>
      <el-button type="primary" @click="showJoumalism = false">
        取消
      </el-button>
    </span>
  </el-dialog>
</template>
<script setup>
import { blogAdd, blogList, blogDelete, ContentModify } from '../../../api/new.js'
import { ref, onMounted } from 'vue'
// import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
const list = ref([''])
//

const id = ref('')
const _id = ref('')
const arttitle = ref('')
const contents = ref('')
const uptime = ref("")
//时间
//const newTime=ref("")
//上传框
const dialogVisible = ref(false)
//编辑框
const showJoumalism = ref(false)

//删除
const xinwendelete = async (_id) => {
  //确认删除？
  ElMessageBox.confirm('确认删除这条公告吗?', '提示信息', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      const data = await blogDelete(_id)
      let { resultCode, resultInfo } = data
      if (resultCode == 1) {
        ElMessage({
          type: 'success',
          message: 'Delete completed',
        })
        coo()
      }
    })
}
//获取列表
const coo = async () => {
  let classnumber = '4'
  let data = await blogList(classnumber)
  let { resultCode, resultInfo } = data
  if (resultCode == 1) {
    console.log(resultInfo);
    list.value = resultInfo  //列表
  }
}
//显示发布弹窗
const showFabu = (list) => {
  arttitle.value =""
  contents.value =""
  dialogVisible.value = true 
}
//显示编辑弹窗
const onEdit = (list) => {
  _id.value= list._id
  arttitle.value = list.arttitle
  contents.value = list.contents
  showJoumalism.value = true 
}
//修改
const getxiugai=async()=>{
  let data = await ContentModify(_id.value, arttitle.value, contents.value)
  let { resultCode, resultInfo } = data
  if (resultCode == 1) {
    console.log(resultInfo);
     contents.value = ''
    showJoumalism.value=false
    coo()
    ElMessage({
          type: 'success',
          message: '修改成功',
        })
  }else{
    console.log(resultInfo);
    ElMessage({
          type: 'success',
          message: '修改失败',
        })
  }
}
//时间
onMounted(() => {
  getNowTime();//进入是调用获取时间
  clearInterval(myTimeDisplay);//销毁之前的定时器
  var myTimeDisplay = setInterval(() => {
    getNowTime();//每秒自动更新时间
  }, 1000)

  coo()

})
//获取实时时间
const getNowTime = () => {
  var date = new Date();
  var time = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
  uptime.value = time
}

//点击提交触发提交函数
const handleSubmit = async () => {
  let nick = JSON.parse(localStorage.getItem("user")).nick
  let articleauthor = JSON.parse(localStorage.getItem("user"))._id
  let data = await blogAdd(
    id.value,
    arttitle.value,
    articleauthor,
    nick,
    contents.value,
    uptime.value,
    4,
    '公告',
  )
  let { resultCode, resultInfo } = data
  if (resultCode == 1) {
    arttitle.value = ''
    contents.value = ''
    alert(resultInfo)
    dialogVisible.value=false
    coo()
    ElMessage({
          type: 'success',
          message: '发布成功',
        })
  }else{
    ElMessage({
          type: 'success',
          message: '发布失败，请重新发布',
        })
  }
}
</script>
<style scoped lang="scss">
.container {
  min-width: 800px;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgb(223, 222, 222);
    height: 50px;
    width: 100%;

    .bigbox {
      width: 800px;
      height: 500px;
      position: absolute;
      top: 25%;
      left: 25%;
      padding: 20px;
      box-shadow: 5px 5px 5px #999;
      border: 1px solid #666;
      background-color: white;

    }

    span,
    button {
      margin: 0 20px 0 20px;

    }

  }
}

.listbox {
  margin-bottom: 10px;
}
</style>